<template>
  <div class="cl-list" ref="wrapper">
    <div>
      <div class="cl-area">
        <div class="cl-title border-topbottom">当前城市</div>
        <div @click="location" class="cl-button-list">
          <div class="cl-button-wrapper">
            <div class="cl-button">{{ LocationCity }}</div>
          </div>
        </div>
      </div>
      <div class="cl-area" v-for="(item, index) in hotlists" :key="index">
        <div class="cl-title border-topbottom">{{ item.name }}</div>
        <div class="cl-button-list">
          <div
            v-for="(i, index1) in item.cities"
            :key="index1"
            class="cl-button-wrapper"
          >
            <div class="cl-button">{{ i.name }}</div>
          </div>
        </div>
      </div>

      <!-- <van-index-bar>
        <van-index-anchor index="A" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />

        <van-index-anchor index="B" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />

        <van-index-anchor index="C" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />

        <van-index-anchor index="D" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="E" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />

        <van-index-anchor index="F" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
      </van-index-bar> -->

      <!-- <div class="cl-area" v-for="(item, initial) of hotcity" :key="initial" :res="initial">
        <div class="cl-title border-topbottom">{{ item.initial }}</div>
        <div class="cl-item-list" v-for="(i, index1) in item.list" :key="index1">
          <div class="cl-item border-topbottom">{{ i.name }}</div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import Bscroll from "better-scroll";

import cityLists from "../../assets/js/city.json";
export default {
  name: "CityList",
  props: {
    letter: String
  },
  data() {
    return {
      hotlists: [],
      hotcity: [],
      LocationCity: "正在定位"
    };
  },
  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper);
    this.cltyList();
    this.city();
  },
  watch: {
    letter() {
      if (this.letter) {
        const element = this.$refs[this.letter][0];
        // console.log(element);
        this.scroll.scrollToElement(element);
      }
      // console.log(this.letter);
    }
  },
  methods: {
    location() {
      this.$emit("locttionCity", this.LocationCity);
      // console.log("石家庄" + this.LocationCity);
    },

    parameters() {
      this.$emit("passing-parameters", this.LocationCity);
      // console.log("定位" + this.LocationCity);
    },

    cltyList() {
      this.hotlists = cityLists.data.hotCities;
      // console.log(this.hotlists);
      // console.log(cityLists);
      this.hotcity = cityLists.city;
      // console.log(this.hotcity);
    },
    city() {
      //   //定义获取城市方法
      //   const geolocation = new BMap.Geolocation();
      //   var _this = this;
      //   geolocation.getCurrentPosition(
      //     function getinfo(position) {
      //       let city = position.address.city; //获取城市信息
      //       // let province = position.address.province; //获取省份信息
      //       _this.LocationCity = city;
      //       // let CityProvince = `${province}${city}`;
      //       // _this.LocationCity = CityProvince;
      //       console.log(_this.LocationCity);
      //       // console.log(CityProvince);
      //     },
      //     function(e) {
      //       _this.LocationCity = "定位失败";
      //     },
      //     { provider: "baidu" }
      //   );
    }
  },
  components: {
    // CityLists
  }
};
</script>

<style lang="stylus" scoped></style>
